<template>
  <el-row :gutter="5">
    <el-col :sm="2" :xs="5" style="padding-left:15px;">
      <el-button
        class="nav-btn"
        type="text" 
        :icon="isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'" 
        size="medium"
        @click="$emit('btnClick')">
      </el-button>
    </el-col>
    <el-col class="header-title" :sm="18" :xs="18" style="font-weight: bold;font-size:1rem;color:#555;">
      <span class="title-class" style="width:100%;">
        <slot></slot>
      </span>
    </el-col>
    <el-col class="hidden-xs-only" :sm="4" :xs="1" style="justify-content:flex-end;padding-right:15px;">
      <el-button
        class="user-btn"
        type="text" 
        :icon="'el-icon-s-custom'" 
        size="medium">
      </el-button>
    </el-col>
  </el-row>  
</template>

<script lang='ts'>
import { defineComponent } from 'vue';
import {
  ElCol,
  ElRow,
  ElButton,
  ElIcon
} from 'element-plus';
import 'element-plus/lib/theme-chalk/display.css';

export default defineComponent({
  name:'HeaderView',
  components:{
    ElCol,
    ElRow,
    ElButton,
    ElIcon
  },
  props:{
    isCollapse: Boolean
  },
  emits:['btnClick'],
  setup(){
    return {
    };
  }
});
</script>

<style lang='scss' scoped>
.el-row {
  width: 100%;

  .el-col {
    display: flex;
    align-items: center;
    line-height:36px;
  }

  .title-class {
    text-align: right;
  }

  @media only screen and (min-width: 768px) {
    .title-class {
      text-align: left;
    }
  }
  
  .nav-btn, .user-btn {
    padding: 0 5px!important;
    height: inherit !important;
    font-size: 1.8rem !important;
    color:#858585 !important;
  }
}
</style>